import Vue from 'vue'
import MyAlert from './MyAlert'
import MyLink from './MyLink'
import MyInput from './MyInput'
import MyButton from './MyButton'
import MyForm from './MyForm'
import MyDialog from './MyDialog'
import MySwitch from './MySwitch'
import MyFormItem from './MyFormItem'

// 导入样式文件
import '@/style/font.css'

// 导入message
import MyMessage from './MyMessage'
// 得到一个这个组件的构造函数
let MessageFunc = Vue.extend(MyMessage)
export default {

    install() {
        Vue.component('myAlert', MyAlert)
        Vue.component('myLink', MyLink)
        Vue.component('MyInput', MyInput)
        Vue.component('MyButton', MyButton)
        Vue.component('MyForm', MyForm)
        Vue.component('MyDialog', MyDialog)
        Vue.component('MySwitch', MySwitch)
        Vue.component('MyFormItem', MyFormItem)

        // 挂载到原型上
        Vue.prototype.$message = function ({ message, type, duration }) {

            let msg = new MessageFunc()
            // 把传递过来的消息赋值给组件
            // 注意，有可能调用时没有传这些属性，所以要加或判断，有值就用传过来的值
            // 没值就用组件内的默认值
            msg.message = message || msg.message
            msg.type = type || msg.type
            msg.duration = duration || msg.duration

            // 渲染出根标签加到body去显示
            msg.$mount()
            document.body.appendChild(msg.$el)

            // 调用show方法显示组件
            msg.show()
        }
    }
}